<template>
  <div id="ver-bar" :style="size">
    <div class="dragRectTop"></div>
    <e-charts :size="size" :options="options" />
    <div class="dragRectBottom"></div>
  </div>
</template>

<script>
import ECharts from '@/components/ECharts'
var data = [] //完成百分比
var titlename = [] //始终点
export default {
  components: {
    ECharts
  },
  data: function () {
    return {
      Barcolor: [],
      options: {
        year: 2022,
        title: {
          text: '当前航班运行情况',
          left: "center",
          top: "5px",
          textStyle: {
            color: "#fff"
          }
        },
        grid: {
          top: "15%",
          left: '10%',
          right: '10%',
          bottom: '5%',
          containLabel: true
        },
        xAxis: {
          show: false,
          max: 100,//设置最大值
        },
        yAxis: [
          {
            // max: 5,
            show: true,
            data: titlename,
            inverse: true,
            axisLine: {
              show: false
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              color: "#fff",
              fontSize: "14"
            }
          },
        ],
        series: [
          {
            realtimeSort: true, //柱状图自动排序，排序自动让Y轴名字跟着数据动
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(220, 220, 220, 0.8)',
              borderRadius: 15, // 统一设置四个角的圆角大小
            },
            name: "条",
            type: 'bar',
            yAxisIndex: 0,
            data: data,
            barGategoryGap: 70,
            barWidth: 15,
            itemStyle: {
              normal: {
                barBorderRadius: 15,
              }
            },
            label: {
              normal: {
                show: true,
                valueAnimation: true, 
                position: "inside",
                formatter: "{c}%",
                color: "#000000", //进度条百分比颜色
              }
            }
          },
        ]
      },
      size: {
        width: '100%',
        height: '8.5rem'
      }
    }
  },
  props: ["currentTime"],
  watch: {
    currentTime: function(){
    const testJson = require('../static/json/ProgressBar_A319');
    this.options.yAxis[0].data = testJson[this.currentTime].title;
    this.options.series[0].data = testJson[this.currentTime].data;
    this.options = { ...this.options };
    }
  },
}
</script>

<style scoped>

#ver-bar{
	/* background-image: url(../assets/line.png); */
  border: 0.5px solid rgba(255,255,255,0.2);
  background: rgba(255, 255, 255, 0.1);
  position: relative;
}
.title{
    text-align: center;
    position: relative;
}
.dragRectTop{
    width: 100%;
    height: 10px;
    position: absolute;
    top: 0;
    left: 0
}

.dragRectTop::before{
    content: "";
    width: 10px;
    height: 10px;
    border-left: 2px solid skyblue;
    border-top: 2px solid skyblue;
    display: block;
    position: absolute;
    left: 0;
    top: 0;
}

.dragRectTop::after{
    content: "";
    width: 10px;
    height: 10px;
    border-right: 2px solid skyblue;
    border-top: 2px solid skyblue;
    display: block;
    position: absolute;
    right: 0;
    top: 0;
}

.dragRectBottom{
    width: 100%;
    height: 10px;
    position: absolute;
    bottom: 0;
    left: 0
}

.dragRectBottom::before{
    content: "";
    width: 10px;
    height: 10px;
    border-left: 2px solid skyblue;
    border-bottom: 2px solid skyblue;
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
}

.dragRectBottom::after{
    content: "";
    width: 10px;
    height: 10px;
    border-right: 2px solid skyblue;
    border-bottom: 2px solid skyblue;
    display: block;
    position: absolute;
    right: 0;
    bottom: 0;
}
</style>